
.grid-view {
  flex: 1;

  &__resize {
    width: 100%;
  }

  &__list {
    padding: 0 0 16px;
  }

  &_columnCount {
    @for $i from 1 to 15 {
      &_#{ $i } {
        & .grid-view__cell:nth-child(#{$i}n) {
          padding-right: 0;
        }
      }
    }
  }

  &__cell {
    padding: 16px 16px 0 0;
    box-sizing: border-box;
    &-header {
      padding: 5px;
      width: 100%;
      display: flex;
      background: var(--sand_0);
      justify-content: space-between;
    }

    &-content {
      width: 100%;
      height: 100%;
      cursor: pointer;
      overflow: hidden;
      position: relative;
      border-radius: 8px;
      background: none;

      &::after {
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        content: "";
        position: absolute;
        pointer-events: none;
        border-radius: 8px;
        border: 1px solid var(--sand_300);
      }
    }

    &_selected &-content {
      background-color: #eff7ff;
      box-shadow: 0 0 2px 2px rgba(var(--accent_color-raw), 0.44);

      &::after {
        box-shadow: 0 0 0 1px rgba(26, 144, 255, 0.6) inset;
      }
    }
  }

  .skeletonLoader {
    padding: 5px;
  }

  & .grid-image-wrapper {
    text-align: center;
    background: var(--sand_100);
  }
}
